<!-- 侧边导航栏 -->
<template>
  <div class="nav">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="search">
          <el-input
            v-model="search"
            placeholder="轻敲键盘,点滴回忆..."
          ></el-input>
          <div class="search-btn">
            <i class="el-icon-finished"></i>
          </div>
        </div>
      </div>
      <div class="text item">
        <b>分类</b>
        <p><a href="javascript:;" @click="$router.push('/home')">博客</a></p>
        <p><a href="javascript:;">生活</a></p>
        <p><a href="javascript:;">代码</a></p>
        <p><a href="javascript:;">娱乐</a></p>
        <b>邻居</b>
        <p><a href="https://gitee.com/">Gitee</a></p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "RightNav",
  data() {
    return {
      search: "",
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.nav {
  font-size: 18px;
  flex: 1;
  .box-card {
    background-image: url("../assets/bc.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .search {
    display: flex;
    /deep/ .el-input {
      width: 50%;
      font-size: 17px;
      font-family: "Microsoft soft";
      border-right: none;
    }
    .search-btn {
      height: 39px;
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid #dcdfe6;
      background-color: #dcdfe6;
      border-left: none;
      margin-left: -5px;
      z-index: 3;
    }
    .search-btn:hover {
      background-color: #f07b3f;
      color: white;
    }
  }

  .text {
    b {
      font-size: 25px;
      text-shadow: 0.1em 0.1em 0.1em white;
    }
    a {
      font-size: 18px;
      font-weight: 600;
      color: #f07b3f;
      text-shadow: 0.2em 0.1em 0.1em black;
    }
    a:hover {
      color: white;
    }
    a:visited {
      color: #f07b3f;
    }
  }
}
</style>